<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Teleport</title>
    <style>
			.modal {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0,0,0,.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .modal div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        width: 300px;
        height: 300px;
        padding: 5px;
      }
		</style>
	</head>
	<body>
		<div id="app" style="position: relative;">
      <h3>Tooltips with Vue 3 Teleport</h3>
      <div>
        <modal-button></modal-button>
      </div>
    </div>
  
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
      const app = Vue.createApp({});
      app.component('modal-button', {
        template: `
          <button @click="modalOpen = true">
              Open full screen modal!
          </button>
          <teleport to="body">
          <div v-if="modalOpen" class="modal">
            <div>
              I'm a modal! 
              <button @click="modalOpen = false">
                Close
              </button>
            </div>
          </div>
          </teleport>
        `,
        data() {
          return { 
            modalOpen: false
          }
        }
      })
      app.mount('#app')

    </script>
	</body>
</html>

